<template>
  <div>
      <el-card class="box-card">
        <el-tabs type="border-card" v-if="premition=='true'">
            <el-tab-pane label="本部门人员">
                <span class="col-span">部门：</span>
                <el-cascader
                    style="width:20%"
                    clearable 
                    @change="changeFilter"
                    :options="departmentFilterData"
                    filterable
                    collapse-tags
                    :props="props"></el-cascader>
                <span class="col-span">关键字搜索：</span>
                <el-select
                    v-model="tagValue"
                    filterable
                    clearable
                    remote
                    placeholder="请输入姓名或邮箱前缀"
                    :remote-method="remoteMethod"
                    :loading="loading"
                    @change="selectFn"
                    >
                    <el-option
                        v-for="item in options"
                        :key="item.index"
                        :label="item.label"
                        :value="item.value">
                        <span style="float: left">{{ item.label }}</span>
                        <span style="float: right">{{ item.value }}</span>
                    </el-option>
                </el-select>
                <el-table
                    :data="tableData"
                    border
                    style="width: 100%;margin-top:10px"
                    :header-cell-style="{background:'#eef1f6'}"
                    max-height=700
                    v-loading="loadingTable">
                    <el-table-column label="员工姓名" property="name" align="center" fixed="left">
                    </el-table-column>
                    <el-table-column label="邮箱前缀" property="ldap" align="center">
                    </el-table-column>
                    <el-table-column label="部门" property="dept" align="center" width=180>
                    </el-table-column>
                    <el-table-column label="员工ID" property="workcode" align="center">
                    </el-table-column>
                    <el-table-column label="员工类型" align="center" width=130> 
                        <template slot-scope="scope">
                            <!-- <div v-if="scope.row.edit">
                                <el-select v-model="scope.row.type" clearable placeholder="请选择" @change="typeFn">
                                    <el-option
                                    v-for="item in optionsType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </div> -->
                            <div>{{scope.row.type}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="司龄" property="working_years" align="center"> 
                    </el-table-column>
                    <el-table-column label="入职时间" property="joinworkdate" align="center" width=110>
                    </el-table-column>
                    <el-table-column label="主技术领域" width="180" align="center">
                        <template slot-scope="scope">
                            <div v-if="scope.row.edit">
                                <el-cascader
                                    :options="singleFilterData"
                                    collapse-tags
                                    clearable
                                    v-model="scope.row.main_technical_fields_list"
                                    @change="searchTeac"></el-cascader>
                            </div>
                            <div v-else v-for="(v,i) in scope.row.main_technical_fields" :key="i">
                                {{v.display}}
                            </div>
                        </template> 
                    </el-table-column>

                    <el-table-column label="附加能力" align="center" width=150>
                        <template slot-scope="scope">
                            <div v-if="scope.row.edit">
                                <div v-if="scope.row.edit">
                                    <el-cascader
                                    :options="singleFilterData"
                                    collapse-tags
                                    clearable
                                    v-model="scope.row.additional_capabilities_list"
                                    :props="props"
                                    @change="additionalCapabilitiesFn"></el-cascader>
                                </div>
                            </div>
                            <div v-else >
                                <div v-if="scope.row.additional_capabilities.length>0">
                                    <el-tooltip placement="top" effect="light">
                                    <div slot="content" v-for="(v,i) in scope.row.additional_capabilities" :key="i">{{v.display}} </div>
                                    <el-tag>
                                        {{scope.row.additional_capabilities[0].display.length > 15 ? scope.row.additional_capabilities[0].display.substring(0,14)+ "..." : scope.row.additional_capabilities[0].display+ "..."}}
                                    </el-tag>
                                    </el-tooltip>
                                </div>
                                
                            </div>
                        </template>
                    </el-table-column>
                                        <el-table-column label="人员状态" align="center" width=130 >
                        <template slot-scope="scope">
                            <div v-if="scope.row.edit">
                                <el-select v-model="scope.row.status_show" clearable placeholder="请选择" @change="statusChange">
                                    <el-option
                                    v-for="item in optionsValueStatus"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div v-else>
                                {{scope.row.status_show}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="工作模式" align="center" width=180>
                        <template slot-scope="scope">
                            <div v-if="scope.row.edit">
                                <el-select v-model="scope.row.working_mode_list"  clearable  collapse-tags multiple placeholder="请选择" @change="searchworkingMode">
                                    <el-option
                                    v-for="item in optionsValueJob"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div v-else v-for="(v,i) in scope.row.working_mode" :key="i">
                                {{v.name}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="业务领域" align="center" width=250>
                        <template slot-scope="scope">
                            <div v-if="scope.row.edit">
                                 <el-select v-model="scope.row.business_area_list" collapse-tags clearable multiple placeholder="请选择" @change="businessAreaFn">
                                    <el-option
                                    v-for="item in singleFilterData1"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </div>
                            <div v-else v-for="(v,i) in scope.row.business_area" :key="i">
                                {{v.name}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="编程语言" align="center" width=240>
                        <template slot-scope="scope">
                            <div v-if="scope.row.edit">
                                <el-select style="width:100%" v-model="scope.row.programing_language_list" collapse-tags clearable multiple placeholder="请选择" @change="programingLanguageFn">
                                    <el-option
                                    v-for="item in valuePLList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </div>
                            <div v-else v-for="(v,i) in scope.row.programing_language" :key="i">
                                {{v.name}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="软件平台" align="center" width=200>
                        <template slot-scope="scope">
                            <div v-if="scope.row.edit">
                                <el-select v-model="scope.row.software_platform_list" clearable placeholder="请选择" multiple collapse-tags @change="softwarePlatform">
                                    <el-option
                                    v-for="item in valueSoftwarePlatform"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                    </el-option>
                                </el-select>
                            </div>
                            <div v-else v-for="(v,i) in scope.row.software_platform" :key="i">
                                {{v.name}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="所在城市" align="center" width=100>
                        <template slot-scope="scope">
                            <div v-if="scope.row.edit">
                                <el-input v-model="scope.row.city" clearable></el-input>
                            </div>
                            <div v-else>
                                {{scope.row.city}}
                            </div>
                            
                        </template>
                    </el-table-column>
                    <el-table-column label="编辑" align="center" fixed="right" width=180>
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" v-if="!scope.row.edit" @click="editFn(scope.$index,scope.row)" :disabled="!canEdit">编辑</el-button>
                        <el-button type="success" size="mini" v-if="scope.row.edit" @click="editSubmit(scope.$index,scope.row)">保存</el-button>
                        <el-button type="warning" size="mini" v-if="scope.row.edit" @click="cancelFn(scope.$index,scope.row)">取消</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    style="margin-top:10px;text-align: center;"
                    background
                    @current-change="handleCurrentChange"
                    :current-page="current"
                    :page-size="baseSize"
                    layout="total, prev, pager, next, jumper"
                    :total="total"
                    >
                </el-pagination>
            </el-tab-pane>
            <el-tab-pane label="其他部门人员"><OtherDeptPeople></OtherDeptPeople></el-tab-pane>
        </el-tabs>
        <div v-if="premition=='false'">
            <el-col class="primary">人员查询</el-col>
            <OtherDeptPeople></OtherDeptPeople>
        </div>
</el-card>
  </div>
</template>

<script>
import { getHeaderName } from '@/app.config'
import otherDeptPeople from './components/otherDeptPeople.vue'
export default {
    inject: ['reload'],
     components: {
        OtherDeptPeople: otherDeptPeople
    },
    mounted(){
        this.getTableDataFn();
        this.getDepartmentFilter()
    },
    data(){
        return{
            premition:false,
            searchTeacVal:'',
            addvalue:'',
            loadingTable:false,
            canEdit:true,
            keywords:'',
            props: { multiple: true },
            tableData:[],
            singleFilterData:[],
            singleFilterData1:[],
            optionsType:[{
                label:"正式员工",
                value:"正式员工",
            },{
                label:"实习",
                value:"实习",
            },{
                label:"外协",
                value:"外协",
            }],
            value:'',
            optionsValueStatus:[],
            valueJob:'',
            optionsValueJob:[],
            filterData:[],
            valuePLList:[],
            valueSoftwarePlatform:[],
            total:0,
            baseSize:20,
            current:1,
            departmentFilterData: [],
            departmentval:'',
            deptArrParam:[],
            tagValue:'',
            options:[],
            loading:false,
            keywordsPramas:'',
            mainTechnicalFields:'',
            workingModePramas:[],
            workingModePramas1:[],
            statusPramas:'',
            statusPramas1:'',
            businessAreaPramas:[],
            businessAreaPramas1:[],
            programingLanguagePramas:[],
            programingLanguagePramas1:[],
            softwarePlatformPramas:[],
            softwarePlatformPramas1:[],
            optionsValueAc:[],
            additionalCapabilitiesPramas:[],
            additionalCapabilitiesPramas1:[],
            typePrama:'',
            mainTechnicalFields12:[],
            flag:false,
            flag1:false,
            flag2:false,
            flag3:false,
            flag4:false,
            flag5:false,
            flag6:false,
            flag7:false,
        }
    },
    computed: {
    },
    methods:{
        typeFn(e){
            this.typePrama = e
        },
        additionalCapabilitiesFn(e){ //附加能力
            this.flag1 = true
            // this.additionalCapabilitiesPramas = []
            e.map(v=>{
                this.additionalCapabilitiesPramas.push(v[v.length-1])
                
            })
        },
        softwarePlatform(e){
            this.flag4 = true
            // this.softwarePlatformPramas = []
            this.softwarePlatformPramas = e
        },
        programingLanguageFn(e){
            this.flag3 = true
            // this.programingLanguagePramas = []
            this.programingLanguagePramas = e
        },
        businessAreaFn(e){
            this.flag2 = true
            // this.businessAreaPramas = []
            this.businessAreaPramas = e
        },
        statusChange(e){
            console.log(e)
            this.flag6 = true
            // this.statusPramas=''
            this.statusPramas = e
        },
        searchworkingMode(e){ // 工作模式
            this.flag5 = true
            // this.workingModePramas = []
            this.workingModePramas = e
        },
        searchTeac(e){
            this.flag = true
            // this.mainTechnicalFields = ''
            this.mainTechnicalFields = e[e.length-1]
        },
        editSubmit(index,e){
            this.canEdit = true
            let data = {}
            console.log(e)
            if(e.main_technical_fields_list.length<1){
                this.$message.warning("请填写主技术领域")
                return false
            }
            if(e.main_technical_fields.length>0) {
                this.mainTechnicalFields12 = e.main_technical_fields[0].id //表格行数据
            }
            e.additional_capabilities.map(val=>{
                this.additionalCapabilitiesPramas1.push(val.id) //表格行数据
            })
            this.statusPramas1 = e.status
            e.business_area.map(v=>{
                this.businessAreaPramas1.push(v.id) //表格行数据
            })
            e.programing_language.map(val=>{
                this.programingLanguagePramas1.push(val.id) //表格行数据
            })
            e.working_mode.map(val=>{
                this.workingModePramas1.push(val.id) //表格行数据
            })
            if(e.software_platform){
                e.software_platform.map(v=>{
                this.softwarePlatformPramas1.push(v.id) //表格行数据
            })
            }
            
            if(!this.flag){
                data['main_technical_fields'] = this.mainTechnicalFields12 
            }else{
                if(!this.mainTechnicalFields){
                    this.mainTechnicalFields=''
                    data['main_technical_fields'] = this.mainTechnicalFields // 修改数据
                }else{
                    data['main_technical_fields']=this.mainTechnicalFields
                }
            }
            if(!this.flag1){
                data['additional_capabilities'] = this.additionalCapabilitiesPramas1 
            }else{
                if(!this.additionalCapabilitiesPramas){
                    this.additionalCapabilitiesPramas=''
                    data['additional_capabilities'] = this.additionalCapabilitiesPramas // 修改数据
                }else{
                    data['additional_capabilities']=this.additionalCapabilitiesPramas
                }
            }
            if(!this.flag2){
                data['business_area'] = this.businessAreaPramas1 
            }else{ 
                if(!this.businessAreaPramas){
                    this.businessAreaPramas=[]
                    data['business_area'] = this.businessAreaPramas // 修改数据
                }else{
                    data['business_area']=this.businessAreaPramas
                }
            }
            if(!this.flag3){
                data['programing_language'] = this.programingLanguagePramas1 
            }else{ 
                if(!this.programingLanguagePramas){
                    this.programingLanguagePramas=[]
                    data['programing_language'] = this.programingLanguagePramas // 修改数据
                }else{
                    data['programing_language']=this.programingLanguagePramas
                }
            }
            if(!this.flag4){
                data['software_platform'] = this.softwarePlatformPramas1 
            }else{ 
                if(!this.softwarePlatformPramas){
                    this.softwarePlatformPramas=[]
                    data['software_platform'] = this.softwarePlatformPramas // 修改数据
                }else{
                    data['software_platform']=this.softwarePlatformPramas
                }
            }
            if(!this.flag5){
                data['working_mode'] = this.workingModePramas1 
            }else{ 
                if(!this.workingModePramas){
                    this.workingModePramas=[]
                    data['working_mode'] = this.workingModePramas // 修改数据
                }else{
                    data['working_mode'] = this.workingModePramas
                }
            }
            if(!this.flag6){
                data['status'] = this.statusPramas1 
            }else{
                if(!this.statusPramas){
                    // this.statusPramas=''
                    data['status'] = this.statusPramas // 修改数据
                }else{
                    data['status'] = this.statusPramas
                }
            }
            data['type'] = e.type
            data['city'] = e.city 
            this.$axios({
                url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/'+ e.employee_id,
                method: "post",
                headers: getHeaderName(),
                data:data
            }).then(res => {
                if(res.data.code == 200) {
                    if(res.data.status=="error"){ 
                        this.$message.error(res.data.message)
                    }else{
                        this.$message.success(res.data.message)
                        this.dialogEditVisible = false
                        this.getTableDataFn()
                    }
                
                } else {
                this.$message.error(res.data.message)
                }
            })
        },
        selectFn(item){
            this.current = 1;
            this.keywordsPramas = item
            this.getTableDataFn()
        },
        remoteMethod(query) {
            if (query !== '') {
                this.loading = true;
                let keywordsPrama  = {}
                keywordsPrama["status"] = 1
                keywordsPrama["keywords"] = query
                keywordsPrama["departments"] = this.deptArrParam;
                setTimeout(() => {
                    this.loading = false;
                    this.$axios({
                        url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/car_select_employee' ,
                        method: "post",
                        headers: getHeaderName(),
                        data:keywordsPrama
                    }).then(res => {
                        this.options = res.data.data
                    })
                }, 200);
            } else {
                this.options = [];
            }
        },
        changeFilter(e){
            this.deptArrParam=[]
            e.map(v =>{
                this.deptArrParam.push(v[v.length-1])
            })
            this.current = 1
            this.getTableDataFn()
        },
        handleCurrentChange(val) {
            this.canEdit = true
            this.current = val;
            this.getTableDataFn();
        },
        cancelFn(index,row){
            row.edit = false;
            this.canEdit = true
            this.reload()
            this.$set(this.tableData,index,row);
        },
        editFn(index,row){
            this.flag = false
            this.flag1 = false
            this.flag2 = false
            this.flag3 = false
            this.flag4 = false,
            this.flag5 = false,
            this.flag6 = false
            // 清空
            this.mainTechnicalFields = '';
            this.additionalCapabilitiesPramas = []
            this.mainTechnicalFields12 = ''
            this.additionalCapabilitiesPramas1 = []
            this.businessAreaPramas=[]
            this.businessAreaPramas1=[]
            this.programingLanguagePramas1 = []
            this.programingLanguagePramas = []
            this.softwarePlatformPramas1 = []
            this.softwarePlatformPramas = []
            this.workingModePramas = []
            this.workingModePramas1 = []
            this.statusPramas1 = ''
            this.statusPramas = ''
            console.log(row,"编辑")
            this.getSingleFilter();
            this.getFilter();
            this.canEdit = false
            row.edit = true;
            this.$set(this.tableData,index,row);
        },
        getTableDataFn(){
            this.premition = localStorage.getItem("is_dept_manage")
            // this.premition = false
            this.canEdit = true
            this.loadingTable = true
            this.flag = false
            let data = {}
            data.page = this.current;
            data.keywords = this.keywordsPramas;
            data.departments = this.deptArrParam;
            data.status = 1;
            this.$axios({
                url: `${process.env.VUE_APP_SOURSE_MANAGE_HOST}/api/v1/car_employee`,
                method: "post",
                headers: getHeaderName(),
                data: data
            }).then((res=>{
                this.loadingTable = false
                this.tableData = res.data.data.data.map((item) => {
                    item.business_area_list = []
                    item.business_area.filter(a => item.business_area_list.push(a.id))

                    item.programing_language_list = []
                    item.programing_language.filter(a => item.programing_language_list.push(a.id)) 

                    item.software_platform_list = []
                    item.software_platform.filter(a => item.software_platform_list.push(a.id))  

                    item.working_mode_list = []
                    item.working_mode.filter(a => item.working_mode_list.push(a.id))

                    item.additional_capabilities_list = []
                    item.additional_capabilities.filter(a => item.additional_capabilities_list.push(a.all_parent_list_id))
                    
                    item.main_technical_fields_list = ''
                    item.main_technical_fields.filter(a => item.main_technical_fields_list=a.all_parent_list_id)

                    return item
                })

                this.total = res.data.data.totalCount;
            }))
        },
        getSingleFilter() { // 技术领域
            this.$axios({
                url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/filter/technical_field/tree',
                method: "get",
                headers: getHeaderName(),
            }).then(res => {
                    this.singleFilterData = res.data.data
            })
        },
        getFilter() { // 表格单元格所有options
            this.$axios({
                url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/employee/filter',
                method: "get",
                headers: getHeaderName(),
            }).then(res => {
                this.filterData = res.data.data;
                this.valuePLList = this.filterData.programing_language.map(function(item){
                    return {
                        "label":item.text,
                        "value":item.value
                    }
                });
                this.valueSoftwarePlatform = this.filterData.software_platform.map(function(item){
                    return {
                        "label":item.text,
                        "value":item.value
                    }
                });
                this.optionsValueJob = this.filterData.working_mode.map(function(item){
                    return {
                        "label":item.text,
                        "value":item.value
                    }
                });
                this.optionsValueStatus = this.filterData.status.map(function(item){
                    return {
                        "label":item.text,
                        "value":item.value
                    }
                });
                this.singleFilterData1 = this.filterData.business_area.map(function(item){
                    return {
                        "label":item.text,
                        "value":item.value
                    }
                });
            })
        },
        getDepartmentFilter() {
            this.$axios({
                url: process.env.VUE_APP_SOURSE_MANAGE_HOST + '/api/v1/department/tree',
                method: "get",
                headers: getHeaderName(),
            }).then(res => {
                this.departmentFilterData = res.data.data.tree_data
            }).catch(error => {
            })
        },
    }
}
</script>

<style lang="scss" scoped>
    .col-span {
    min-width: 80px;
    line-height: 36px;
    margin-left: 20px
  }
  .primary {
  color: #409EFF;
  font-size: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 400;
}
</style>